<style lang="less">
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}
</style>
<template>
  <div>
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
    <div class="steps-content">
      <StepsPageFormDemo v-show="current === 0" ref="stepsPageFormDemo"></StepsPageFormDemo>
    </div>
    <div class="steps-action">
      <a-button
        v-if="current < steps.length - 1"
        type="primary"
        @click="handleNext"
      >
        下一步
      </a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="handleDone"
      >
        完成
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="handlePrev">
        上一步
      </a-button>
    </div>
  </div>
</template>
<script>
import StepsView from "../common/components/StepsView.vue";
import StepsPageFormDemo from "./StepsPageFormDemo.vue";
export default {
  props: {},
  components: {
    StepsView,
    StepsPageFormDemo,
  },
  data() {
    return {
      current: 0,
      steps: [
        {
          title: "First",
          // content: 'first',
        },
        {
          title: "Second",
          // content: "Second-content",
        },
        {
          title: "Last",
          // content: "Last-content",
        },
      ],
    };
  },
  methods: {
    getFirstFormTemplate() {},
    handleNext() {
      console.log(this.$refs.stepsPageFormDemo.info)
      this.current++;
    },
    handlePrev() {
      this.current--;
    },
    handleDone() {},
  },
};
</script>